<template>
	<view class="wallet b-box">
		<!-- 师傅端  钱包 1-->
		<u-navbar leftIconSize="34rpx" autoBack :placeholder="true" bgColor="#ffffff">
			<view slot="center">
				<text class="c-000 pf-sc fw-600" style="font-size: 34rpx;">我的钱包</text>
			</view>
		</u-navbar>
		<view
			class="authentication-container w-750 b-box  bg-fa po-re"
			:style="{ height: containerHeight }"
		>
			<!-- 收益 -->
			<view
				class="w-750 b-box d-flex flex-c ali-i-s just-ev bg-fa"
				style="height: 170rpx;padding: 0 40rpx;"
			>
				<view class="d-flex w-100 b-box flex-r ali-i-c just-sw">
					<view class="d-flex flex-r ali-i-c just-s">
						<text class="pf-sc fw-400 c-000" style="font-size: 30rpx;">总收益：</text>
						<text class="pf-sc fw-500" style="font-size: 34rpx;color: #FF5C00;">
							￥{{ workUser.money }}
						</text>
					</view>
					<view class="d-flex flex-r ali-i-c just-e" @click="GoWithdrawalAccount">
						<text class="pf-sc fw-400" style="font-size: 26rpx;color: #26387C;">提现账户</text>
						<image
							src="../static/tixian.png"
							style="width: 13rpx;height: 20rpx;margin: 0 12rpx;right: 6rpx;"
							class="po-re"
						></image>
					</view>
				</view>
				<view class="d-flex w-100 b-box flex-r ali-i-c just-sw">
					<view class="d-flex flex-r ali-i-c just-s">
						<text class="pf-sc fw-400 c-000" style="font-size: 26rpx;">可提现：</text>
						<text class="pf-sc fw-500" style="font-size: 30rpx;color: #FF5C00;">
							￥{{ workUser.money }}
						</text>
					</view>
					<view class="d-flex flex-r ali-i-c just-e">
						<u-button
							:throttleTime="700"
							@click="WithdrawCash"
							:customStyle="{
								height: '48rpx',
								width: '160rpx',
								font: '400 32rpx PingFang SC',
								color: '#ffffff',
								borderWidth: '0rpx',
								background: 'linear-gradient(180deg, #4885C5 0%, #3B52A6 100%)',
								borderRadius: '44rpx'
							}"
							shape="square"
							text="立即提现"
						></u-button>
					</view>
				</view>
			</view>
			<view class="w-750 b-box d-flex flex-c ali-i-c just-c" :style="{ height: boxHeight }">
				<view class="w-100 bg-ff b-box d-flex flex-r ali-i-c just-c">
					<view
						class="d-flex flex-r ali-i-c just-c b-box bg-ff"
						style="height: 92rpx;width: 600rpx;"
					>
						<u-tabs
							:list="TabList"
							lineColor="#FFD300"
							@click="tabsClick"
							@change="tabsClick"
							:inactiveStyle="{
								color: '#666666',
								fontSize: '32rpx',
								fontWeight: '400',
								fontFamily: 'PingFang SC'
							}"
							:activeStyle="{
								color: '#262626',
								fontSize: '32rpx',
								fontWeight: '500',
								fontFamily: 'PingFang SC'
							}"
							lineWidth="40rpx"
							:lineBottom="'12rpx'"
							:itemStyle="{
								height: '88rpx',
								width: '160rpx',
								backgroundColor: 'rgba(255,255,255,0)'
							}"
							:current="TabCurrent"
							lineHeight="6rpx"
						></u-tabs>
					</view>
				</view>
				<view :style="{ height: listHeight }" class="d-flex flex-c ali-i-c just-c w-750 b-box">
					<swiper
						@animationfinish="swiperChange"
						v-if="listHeight"
						:style="{ height: listHeight, width: '100%' }"
						width="100%"
						:skip-hidden-item-layout="false"
						:height="listHeight"
						bgColor="#F7F7F7"
						:radius="0"
						:current="TabCurrent"
						:disable-touch="false"
					>
						<swiper-item>
							<scroll-view
								:style="{ height: listHeight }"
								scroll-y="true"
								v-if="listHeight"
								:refresher-threshold="45"
								enable-flex="true"
								refresher-background="#f7f7f7"
								:lower-threshold="50"
								@scrolltolower="scrolltolower"
							>
								<view
									class=" d-flex flex-c just-s ali-i-c b-box bg-ff"
									style="padding:0 32rpx 26rpx;"
									:style="{ height: listHeight }"
								>
									<view class="w-750 b-box" style="padding: 0 32rpx;" v-if="dataList.length > 0">
										<view
											class="d-flex flex-c ali-i-c just-sw w-100"
											style="padding:24rpx 0rpx;border-top: 1rpx solid #eeeeee;"
											:style="{
												borderBottom: index == dataList.length - 1 ? '1rpx solid #eeeeee' : ''
											}"
											v-for="(item, index) of dataList"
											:key="index"
										>
											<view
												class="w-100 b-box d-flex flex-r ali-i-c just-sw"
												style="margin-bottom: 10rpx;"
											>
												<text class="pf-sc fw-400 c-000" style="font-size: 30rpx;">
													订单{{ item.orderno }}
												</text>
												<text class="pf-sc fw-400 c-000" style="font-size: 26rpx;">已出账</text>
											</view>
											<view class="w-100 b-box d-flex flex-r ali-i-c just-sw">
												<text class="pf-sc fw-400 " style="color:#999999;font-size: 26rpx;">
													{{ item.usertime }}
												</text>
												<text lass="pf-sc fw-400 c-000" style="font-size: 30rpx;">
													{{ item.workermoney }}
												</text>
											</view>
										</view>
									</view>
									<!-- 空状态 -->
									<view
										class=" d-flex flex-c ali-i-c just-c"
										:style="{ height: parseFloat(listHeight) / 2 + 'px' }"
										v-else
									>
										<text style="font: 500 30rpx PingFang SC;color:#B3B3B3 ;margin-top: 30rpx;">
											数据为空
										</text>
									</view>
								</view>
							</scroll-view>
						</swiper-item>
						<swiper-item>
							<scroll-view
								:style="{ height: listHeight }"
								scroll-y="true"
								v-if="listHeight"
								:refresher-threshold="45"
								enable-flex="true"
								refresher-background="#f7f7f7"
								:lower-threshold="50"
								@scrolltolower="scrolltolower"
							>
								<view
									class=" d-flex flex-c just-s ali-i-c bg-ff"
									style="padding: 0  32rpx 26rpx;"
									:style="{ height: listHeight }"
								>
									<view class="w-750 b-box" style="padding: 0 32rpx;" v-if="dataList1.length > 0">
										<view
											class="d-flex flex-c ali-i-c just-sw w-100"
											style="padding:24rpx 0rpx;border-top: 1rpx solid #eeeeee;"
											:style="{
												borderBottom: index == dataList1.length - 1 ? '1rpx solid #eeeeee' : ''
											}"
											v-for="(item, index) of dataList1"
											:key="item.id"
										>
											<view
												class="w-100 b-box d-flex flex-r ali-i-c just-sw"
												style="margin-bottom: 10rpx;"
											>
												<text class="pf-sc fw-400 c-000" style="font-size: 30rpx;">提现</text>
												<text
													v-if="item.status == 0"
													class="pf-sc fw-400 c-000"
													:style="{ color: item.status == 0 ? '#FF5C00' : '#000000' }"
													style="font-size: 26rpx;"
												>
													待审核
												</text>
												<text
													v-if="item.status == 1"
													class="pf-sc fw-400 c-000"
													:style="{ color: item.status == 1 ? '#FF5C00' : '#000000' }"
													style="font-size: 26rpx;"
												>
													审核通过
												</text>
												<text
													v-if="item.status == 2"
													class="pf-sc fw-400 c-000"
													:style="{ color: item.status == 2 ? '#FF5C00' : '#000000' }"
													style="font-size: 26rpx;"
												>
													驳回
												</text>
											</view>
											<view class="w-100 b-box d-flex flex-r ali-i-c just-sw">
												<text class="pf-sc fw-400 " style="color:#999999;font-size: 26rpx;">
													{{ item.createtime }}
												</text>
												<text lass="pf-sc fw-400 c-000" style="font-size: 30rpx;">
													{{ item.money }}
												</text>
											</view>
										</view>
									</view>
									<!-- 空状态 -->
									<view
										class=" d-flex flex-c ali-i-c just-c"
										:style="{ height: parseFloat(listHeight) / 2 + 'px' }"
										v-else
									>
										<text style="font: 500 30rpx PingFang SC;color:#B3B3B3 ;margin-top: 30rpx;">
											数据为空
										</text>
									</view>
								</view>
							</scroll-view>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mywallet, txcode } from '@/common/api.js';
import { _containerHeight, _addUnit, _rpxTpx } from '@/utils/GetSys.js';
import Utabs from '../components/uview-ui/components/u-tabs/u-tabs.vue';
import Unavbar from '../components/uview-ui/components/u-navbar/u-navbar';
import Ubutton from '../components/uview-ui/components/u-button/u-button';
export default {
	components: {
		'u-tabs': Utabs,
		'u-navbar': Unavbar,
		'u-button': Ubutton
	},
	data() {
		return {
			workUser: uni.getStorageSync('workUser'),
			containerHeight: '',
			boxHeight: '',
			listHeight: '',
			datainfo: '',
			TabList: [
				{
					id: 0,
					name: '流水记录'
				},
				{
					id: 1,
					name: '提现记录'
				}
			],
			TabCurrent: 0, //当前选中标签的索引
			page: 1,
			page1: 1,
			dataList: [],
			dataList1: []
		};
	},
	methods: {
		getindexcont() {
			txcode({
				token: uni.getStorageSync('usertoken')
			})
				.then(res => {
					if (res.data.code === 1) {
						this.datainfo = res.data.data;
					}
				})
				.catch(err => {});
		},
		WithdrawCash() {
			//立即提现
			uni.navigateTo({
				url: '/staffModelA/staffC/ImmediatelyWithdrawal/ImmediatelyWithdrawal'
			});
		},
		GoWithdrawalAccount() {
			//跳转提现账户
			if (!this.datainfo.name) {
				uni.showModal({
					title: '提示',
					content: '请先去添加微信收款码',
					success: function(res) {
						if (res.confirm) {
							uni.navigateTo({
								url: '/staffModelA/staffC/AddWithdrawalAccount/AddWithdrawalAccount'
							});
						} else if (res.cancel) {
							return;
						}
					}
				});
			} else {
				uni.navigateTo({
					url: '/staffModelA/staffC/WithdrawalAccount/WithdrawalAccount'
				});
			}
		},
		// 上拉加载
		scrolltolower() {
			if (this.TabCurrent == 0) {
				let page = this.page++;
				this.tabsClick();
			}
			if (this.TabCurrent == 1) {
				let page1 = this.page1++;
				this.tabsClick();
			}
			console.log(this.TabCurrent);
		},
		swiperChange(index) {
			this.TabCurrent = parseInt(index.detail.current);
			this.tabsClick();
		},
		tabsClick(index) {
			let item = index ? index.index : this.TabCurrent;
			this.TabCurrent = item;
			if (this.TabCurrent == 0) {
				let params = {
					token: uni.getStorageSync('user').token,
					type: 1,
					page: this.page
				};

				mywallet(params).then(res => {
					if (item + 1 == 1) {
						if (this.page == 1) {
							this.dataList = res.data.data;
							console.log(this.dataList, '流式记录');
						} else if (this.page > 1) {
							if (res.data.data.length > 0) {
								this.dataList.push(...res.data.data);
							} else {
								uni.showToast({
									title: '没有更多内容了',
									icon: 'none'
								});
								return;
							}
						}
					}
				});
			}

			if (this.TabCurrent == 1) {
				let params = {
					token: uni.getStorageSync('user').token,
					type: 2,
					page: this.page1
				};

				mywallet(params).then(res => {
					if (item + 1 == 2) {
						if (this.page1 == 1) {
							this.dataList1 = res.data.data;
						} else if (this.page1 > 1) {
							if (res.data.data.length > 0) {
								this.dataList1.push(...res.data.data);
							} else {
								uni.showToast({
									title: '没有更多内容了',
									icon: 'none'
								});
								return;
							}
						}
					}
				});
			}
		}
	},
	onLoad() {
		this.containerHeight = _containerHeight();
		this.boxHeight = _addUnit(parseInt(this.containerHeight) - _rpxTpx('170rpx'), 'px');
		this.listHeight = _addUnit(parseInt(this.boxHeight) - _rpxTpx('92rpx'), 'px');
		this.tabsClick();
		this.getindexcont();
	},
	onShow() {}
};
</script>

<style lang="scss">
.wallet {
}
</style>
